<template>
  <div
    class="to-right-slider"
    :style="{
      marginTop: top,
      '--length': sliderLength,
      '--speed': speed + 's',
    }"
  >
    <div class="right">
      <div class="silder_view" :style="{ width: width }">
        <div class="min-box" ref="minBox" :key="count">
          <div class="line"></div>
        </div>
      </div>
      <div class="descript">
        <textBgWhiteVue
          :message="`${prduce.count / 2}套成品,总计${Math.ceil(
            prduce.sumArea/2
          )}m²`"
          size="15px"
          :left="textPostion[0]"
          :top="textPostion[1]"
        />
      </div>
    </div>
  </div>
</template>

<script>
import textBgWhiteVue from "./textBgWhite.vue";
import { queryTodayYield } from "@/api/assembly/cage";
export default {
  components: {
    textBgWhiteVue,
  },
  props: {
    speed: {
      type: Number,
      default: 100,
    },
    textPostion: {
      type: Array,
      default: () => {
        return ["20%", "20%"];
      },
    },
    width: {
      type: String,
      default: "57%",
    },
    top: {
      type: String,
      default: "0%",
    },
    waitNumber: {
      type: Number,
      default: 0,
    },
    waitTime: {
      type: Number,
      default: 60,
    },
    No: {
      type: String,
      default: "一",
    },
    accomplishNumber: {
      type: Number,
      default: 0,
    },
    sliderLength: {
      type: String,
      default: "400px",
    },
    place: {
      type: String,
      default: "",
      require: true,
    },
  },
  data() {
    return {
      count: 0,
      prduce: null,
      timer: null,
    };
  },
  methods: {
    getKongLine() {
      queryTodayYield({ dutyprocess: "中空", place: this.place }).then(
        (res) => {
          this.prduce = res.data;
        }
      );
    },
  },
  mounted() {
    this.getKongLine()
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.getKongLine();
    }, 300000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
.to-right-slider {
  width: 100%;
  height: 12%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.right {
  display: flex;
  height: 100%;
}
.descript {
  flex: 1;
  position: relative;
}
.silder_view {
  display: flex;
  align-items: flex-end;
  width: 57%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0);
}
.min-box {
  display: flex;
  width: 40px;
  height: 10px;
  background-color: rgba(166, 202, 240, 1);
}
.line {
  height: 100%;
  width: 2px;
  background-color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .min-box {
    animation: min-box-spin infinite var(--speed) linear;
  }
}
@keyframes min-box-spin {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--length));
  }
}
</style>
